<template>
  <div class="project">
    <div class="bigbox">
      <div>
        <el-form
          ref="form"
          :model="formdata"
          label-width="50px"
          label-position="left"
        >
          <el-row :gutter="20">
            <el-col :span="5">
              <el-form-item label="项目:">
                <el-input size="small"
                  v-model="formdata.keyword"
                  placeholder="请输入项目编码或名称关键字"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="19" class="col">
              <el-button @click="action" size="small"
                ><i class="el-icon-refresh"></i> 重置</el-button
              >
              <el-button color="#0088cf" @click="getlist" size="small" type="primary"
                ><i class="el-icon-search"></i> 查询</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="button">
        <el-button color="#0088cf"  size="small" type="primary"><i class="el-icon-plus"></i> 创建项目</el-button>
      </div>
      <div class="tabbox">
        <TableColumn
          ref="tabledataref"
          :tableData="tableData"
          :tableConfig="tableConfig"
        >
          <el-table-column label="项目状态" align="center" width="180">
              <template #default="{ row }">
                <el-tag :type="row.projectStatus ? 'danger' : 'success'">{{
                  row.projectStatus
                }}</el-tag>
              </template>
          </el-table-column>
          <el-table-column label="操作" width="250">
              <template #default="{ row }">
                <span
                  class="cursor-pointer mr-15 text-[#0088cf] text-sm"
                  @click="DialogDatarefs.tolook(row, true)"
                  >编辑</span>
                <span
                  class="cursor-pointer text-[#0088cf] text-sm mr-15"
                  @click="DialogDatarefs.tolook(row, false)"
                  >删除</span>
                <span
                  class="cursor-pointer text-[#0088cf] text-sm mr-15"
                  @click="Settingsrefs.dialogVisible=true"
                  >设置</span>
              </template>
          </el-table-column>
        </TableColumn>
      </div>
    </div>
  </div>
</template>
<script>
import TableColumn from '@/components/Table/index.vue'
import {getProjectPageapi} from '@/api/system/EMS/Project'
export default {
  name: 'CallPoliceIndex',
  components: {
    TableColumn
  },
  data() {
    return {
      formdata:{keyword:''},
      tableData:[],
      tableConfig:[
        { label: '项目编码', prop: 'projectNo' },
        { label: '项目名称', prop: 'projectName' },
        { label: '项目地址', prop: 'projectAddress', width: 700 },
        { label: '投运日期', prop: 'runDate' }
      ]
    }
  },

  async mounted() {},

  methods: {
    async getlist() {
      const {data:{list}} = await getProjectPageapi({ pageNo: 0, pageSize: 20, keyword: ''})
      console.log(list)
    },
    // 重置
    action(){}
  }
}
</script>
<style lang="scss" scoped>
.project{
  padding: 10px;
  height: 100%;
  background-color: #f7f9fc;
  .bigbox{
    height: 100%;
    padding: 20px;
    background-color: #fff;
    .col{
      text-align: right;
      margin-top: 4px;
    }
    .button{
      margin-bottom: 10px;
    }
    .tabbox{
      height: calc(100% - 150px);
    }
  }
}
</style>
